<template>
  <div class="mt-12">
    <ListHeader />
    <template v-if="songList.length" v-for="item in songList" :key="item.id">
      <ListItem :info="item" @toggle-name="toggleName" @toggle-add="toggleAdd" />
    </template>
    <template v-else>
      <el-empty description="暂无数据"></el-empty>
    </template>
  </div>
</template>

<script lang="ts" setup>
import type { Song } from '@/types/song'
import ListHeader from './component/listHeader.vue'
import ListItem from './component/ListItem.vue'
import { usePlayerStore } from '@/stores/player'
import { toRefs } from 'vue'

const { setId, addPlayList } = toRefs(usePlayerStore())

defineProps<{
  songList: Array<Song>
}>()

const toggleName = (event: Song) => {
  const { id } = event
  setId.value(id)
}

// 点击添加到播放列表
const toggleAdd = async (e: Song) => {
  addPlayList.value(e.id)
}
</script>

<style lang="less" scoped></style>
